<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>canvas</title>
	<style>
		img {
			display: none;
		}

		table {
		  margin: 0 auto;
		}

		td {
		  padding: 15px;
		}

		#gallery {
		  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
		  margin: 10px;
		}
	</style>
</head>
<body onload="load()">
	<canvas id="graph" width="150" height="150">
		<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images"></a>
	</canvas>
	<canvas id="rhino"></canvas>

	<div>
		<canvas id="frame"></canvas>
		 <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
		 <img id="img-frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
	</div>
	<table id="gallery">
      <tr>
        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
      </tr>
      <tr>
        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
      </tr>
     </table>

	<script>
		function draw() {
			var ctx = document.getElementById('graph').getContext('2d');
			var img = new Image();
			img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';

			img.onload = function() {
				ctx.drawImage(img, 0, 0); // Draws the image specified by the parameter at the coordinates (x, y).
				ctx.beginPath();
				ctx.moveTo(30,96);
				ctx.lineTo(70,66);
				ctx.lineTo(103,76);
				ctx.lineTo(170,15);
				ctx.stroke();
			}
		}

		function rhino() {
			var ctx = document.getElementById('rhino').getContext('2d');
		    var img = new Image();
		    img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';

		    img.onload = function(){
		      for (var i = 0; i < 4; i++){
		        for (var j = 0; j < 3; j++){
				  ctx.drawImage(img,j*50,i*38,50,38);
		        }
		      }
		    };
		}

		// onload event: <body>, <frame>, <iframe>, <img>, <input type="image">, <style>, <link>, <script>
		function frame() {
		    var canvas = document.getElementById('frame');
		    var ctx = canvas.getContext('2d');

			// Draw slice
			ctx.drawImage(document.getElementById('source'),
				  33, 71, 104, 124, 21, 20, 87, 104);

			// Draw frame
			ctx.drawImage(document.getElementById('img-frame'),0,0);
		}

		function gallery() {
			var imgs = document.getElementById('gallery').getElementsByTagName('img'),
			    frame = document.getElementById('img-frame'),
			    img;
			
			for(var i = 0; i < imgs.length; i++) {
			    img = imgs[i];

			    // Create canvas element
			    canvas = document.createElement('canvas');
			    canvas.setAttribute('width',132);
			    canvas.setAttribute('height',150)

				// Insert before the image
				img.parentNode.insertBefore(canvas,img);

				// draw
				ctx = canvas.getContext('2d');

				// Draw image to canvas
				ctx.drawImage(img,15,20);

				// Add frame
				ctx.drawImage(frame,0,0);

				if(i === 0) // 目前看不出有啥不同
					ctx.webkitImageSmoothingEnabled = false;
			}
		}


		function load() {
			frame();
			gallery();
		}

		draw();
		rhino();
	</script>
</body>
</html>
